<template>
	<view>
		<view class="orderDetail">
			<view class="main-box">
				<view class="head">
					<view class="state-text">{{ info.orderLog[0].content }}</view>
					<view class="explain-text">{{ info.orderLog[0].createtime | date('yyyy-mm-dd hh:MM') }}</view>

					<view class="z-flex-c-s-b z-padding-lr-32 z-padding-t-32 z-padding-b-80">
						<view>
							<image class="state-img" v-if="info.status > 1" src="../../static/index/order/state-1-active.png"></image>
							<image class="state-img" v-else src="../../static/index/order/state-1.png"></image>
							<view class="cur-state">已接单</view>
						</view>
						<view class="line-box z-flex">
							<view class="line"></view>
						</view>

						<view>
							<image class="state-img" v-if="info.status > 2" src="../../static/index/order/state-2-active.png"></image>
							<image class="state-img" v-else src="../../static/index/order/state-2.png"></image>
							<view class="cur-state">已出发</view>
						</view>
						<view class="line-box z-flex">
							<view class="line"></view>
						</view>

						<view>
							<image class="state-img" v-if="info.status > 3" src="../../static/index/order/state-3-active.png"></image>
							<image class="state-img" v-else src="../../static/index/order/state-3.png"></image>
							<view class="cur-state">已到达</view>
						</view>
						<view class="line-box z-flex">
							<view class="line"></view>
						</view>

						<view>
							<image class="state-img" v-if="info.status > 4" src="../../static/index/order/state-4-active.png"></image>
							<image class="state-img" v-else src="../../static/index/order/state-4.png"></image>
							<view class="cur-state">开始服务</view>
						</view>
						<view class="line-box z-flex">
							<view class="line"></view>
						</view>

						<view>
							<image class="state-img" v-if="info.status > 5" src="../../static/index/order/state-5-active.png"></image>
							<image class="state-img" v-else src="../../static/index/order/state-5.png"></image>
							<view class="cur-state">服务完成</view>
						</view>
					</view>
				</view>
				<view class="settle-box z-margin-32" v-if="info.is_settle > 0">
					<image src="/static/index/settle.png" class="settle-bg"></image>
					<view class="settle">
						<view class="settle-title z-flex z-radius-b-20">{{ info.is_settle == 1 ? '待结算' : '已结算' }}</view>
						<view class="z-flex-c z-margin-t-40 z-margin-b-100">
							<view class="z-flex-1">
								<view class="z-font-24 text_666">服务者结算</view>
								<view class="z-font-40 z-font-w" v-if="info.is_settle > 1">
									{{ tool.sum(settle.skillPrice, settle.act_travel_price) }}
								</view>
								<view class="z-font-40 z-font-w" v-else>结算中</view>
							</view>
							<view class="z-flex-1" v-if="info.shop_id>0">
								<view class="z-font-24 text_666">商家结算</view>
								<view class="z-font-40 z-font-w" v-if="info.is_settle > 1">
									{{ tool.sum(settle.shopPrice, settle.act_travel_price) }}
								</view>
								<view class="z-font-40 z-font-w" v-else>结算中</view>
							</view>
						</view>
						<view class="z-flex-c z-margin-b-24">
							<view class="z-font-30">支付总金额</view>
							<view class="z-flex-1"></view>
							<view class="z-font-32">￥{{ settle.payprice }}</view>
						</view>
						<view class="num-box z-flex-c">
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">项目金额</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.price }}</view>
							</view>

							<view class="num z-flex-c z-radius-8" v-if="info.discount < 100">
								<view class="z-font-24 text_666">折扣</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.goods_total_price }}</view>
								<view class="discount z-font-24 z-padding-lr-8 z-margin-l-8 z-flex">{{ info.discount / 10 }}折</view>
							</view>
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">优惠券</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.coupon_price }}</view>
							</view>
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">补差价</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.premium_price }}</view>
							</view>
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">优惠券</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.add_price }}</view>
							</view>
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">车费</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.travel_price }}</view>
							</view>
						</view>
						<view class="z-flex-c z-margin-b-24">
							<view class="z-font-30">结算项目金额</view>
							<view class="z-flex-1"></view>
							<view class="z-font-32">￥{{ settle.settle_price }}</view>
						</view>
						<view class="num-box z-flex-c">
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">退款金额</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.refund_price }}</view>
							</view>
							<view class="num z-flex-c z-radius-8">
								<view class="z-font-24 text_666">结算车费</view>
								<view class="z-flex-1"></view>
								<view class="z-font-24">￥{{ settle.act_travel_price }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="floor-2"></view>
				<!-- 主要 content -->
				<view class="order-info-box">
					<view class="make-info">
						<view class="chunk"></view>
						<view class="z-margin-t-32 z-margin-l-32 make-time">预约时间</view>
						<view class="z-margin-t-16 z-padding-l-32">
							<text class="time-date">{{ info.starttime | date('mm-dd') }}</text>
							<text class="z-margin-l-16 time-hour theme-color">{{ info.starttime | date('hh:MM') }}</text>
						</view>
						<view class="z-margin-lr-32 z-margin-t-24 z-margin-b-16 site">
							{{ info.orderAddress.province }}{{ info.orderAddress.city }}{{ info.orderAddress.district }}{{ info.orderAddress.area }}{{ info.orderAddress.address }}
						</view>

						<view class="user-info z-flex-c z-padding-b-16" v-if="info.status > 1">
							<text class="z-padding-lr-32">{{ info.orderAddress.name }}{{ info.orderAddress.sex == 1 ? '男士' : '女士' }}</text>
							{{ info.orderAddress.mobile }}
							<view class="z-flex-1"></view>
							<image class="phone-img z-margin-r-32" @tap="navigation" src="../../static/index/order/navigation.png"></image>
							<image class="phone-img" @tap="call" src="../../static/index/order/phone.png"></image>
						</view>
						<view class="user-remark z-padding-tb-32">
							<text class="z-padding-lr-32 bz-title">备注</text>
							{{ info.memo }}
						</view>
					</view>

					<!-- 订单信息 -->
					<view class="orders-box z-margin-t-24">
						<view class="order-each z-flex-c-s-b z-padding-lr-32 z-padding-t-24">
							<image class="order-each-img" :src="tool.cdn(info.detail.image)" mode="aspectFill"></image>
							<view class="z-margin-l-24 z-flex-1 hidden">
								<view class="z-flex-c">
									<view class="order-each-title">{{ info.detail.name }}</view>
									<view class="z-flex-1"></view>
									<view class="types z-flex z-font-18 z-flex-0">{{ info.to_shop === 'door' ? '上门服务' : '到店核销' }}</view>
								</view>
								<view class="order-number">
									<text class="unit-money">￥</text>
									<text class="order-price">{{ info.detail.price }}</text>
									<text class="quantity">x{{ info.detail.num }}</text>
								</view>
							</view>
						</view>

						<view class="wire z-margin-t-24"></view>
						<view class="z-flex-c z-padding-lr-32 z-margin-t-32" v-if="info.discount < 100">
							<view class="z-font-26">会员价</view>
							<view class="z-flex-1"></view>
							<text class="ticket-price">￥{{ tool.toFix((info.price * info.discount) / 100) }}</text>
							<view class="discount z-font-24 z-padding-lr-8 z-margin-l-24 z-flex">{{ info.discount / 10 }}折</view>
						</view>
						<view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
							<view>
								<image class="ticket-img" src="../../static/index/order/ticket.png"></image>
								优惠券
							</view>
							<view>
								-
								<text class="ticket-price">￥{{ info.coupon_price }}</text>
							</view>
						</view>
						<view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
							<view>补差价</view>
							<view>
								+
								<text>￥{{ info.premium_price }}</text>
							</view>
						</view>
						<view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font" v-for="(item,index) in info.adddetail">
							<view>加项（{{ item.name }}/{{ item.cost_seconds }}分钟/数量:{{ item.num }}）</view>
							<view>
								+
								<text>￥{{ tool.toFix(item.price * item.num) }}</text>
							</view>
						</view>
						<view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
							<view v-if="info.distance">车费（共{{ info.distance }}公里）</view>
							<view v-else>车费</view>
							<view>
								-
								<text>￥{{ info.travel_price }}</text>
							</view>
						</view>

						<view class="wire z-margin-t-32"></view>

						<view class="total-t z-padding-r-32 z-padding-tb-24">
							合计：
							<text class="total-price">￥{{ info.payprice }}</text>
						</view>
						<view class="total-t z-padding-r-32 z-padding-b-24" v-if="info.refund_price > 0">
							（退款金额：
							<text class="z-font-22 refund">￥{{ info.refund_price }}</text>
							）
						</view>
					</view>

					<!-- 订单编号 -->
					<view class="order-odd z-margin-t-24 z-padding-32">
						<view class="z-flex-c-s-b">
							<view class="odd-text">订单编号：</view>
							<view class="order-color" @tap="copy(info.orderId)">
								{{ info.orderId }}
								<text class="copk">复制</text>
							</view>
						</view>
						<view class="z-flex-c-s-b z-margin-t-24">
							<view class="odd-text">下单时间：</view>
							<view class="order-color">{{ info.paytime | date('yyyy-mm-dd hh:MM') }}</view>
						</view>
						<view class="z-flex-c-s-b z-margin-t-24">
							<view class="odd-text">支付方式：</view>
							<view class="order-color">{{ info.paytype === 4 ? '余额' : '微信' }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="order-btn-box z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 1 && !info.skill_id" @tap="accept">立即抢单</view>
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 1 && info.skill_id" @tap="accept">立即接单</view>
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 2" @tap="go">立即出发</view>
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 3" @tap="showUpload">已到达</view>
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 4" @tap="start">开始服务</view>
				<view class="z-btn" v-if="info.is_service <= 0 && info.status === 5" @tap="showUpload">服务完成</view>
			</view>
		</view>
		
		<u-popup round :show="show" mode="bottom" @close="onClose">
			<view class="upload-box">
				<view class="z-font-30 z-flex z-padding-t-32">请上传图片</view>
				<view class="image-box z-padding-32">
					<view class="images-box" v-for="(item,index) in images" @tap="chooseImages(index)">
						<image :src="cdn(item)" class="upload" mode="aspectFill"></image>
						<image src="/static/service/del.png" class="del" @tap.stop="delImages(index)"></image>
					</view>
					<view class="images-box" @tap="chooseImages" v-if="images.length <= 9 ">
						<image src="/static/index/upload.png" class="upload"></image>
					</view>
				</view>
				<view class="z-btn z-margin-32" v-if="info.is_service <= 0 && info.status === 3" @tap="arrive">已到达</view>
				<view class="z-btn z-margin-32" v-if="info.is_service <= 0 && info.status === 5" @tap="finish">服务完成</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: '',
			info: '',
			show: false,
			images: [],
			safeBottom: `10px`,
			settle: ''
		};
	},
	onLoad(options) {
		this.order_id = options.id
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		copy(event) {
			uni.setClipboardData({
				data: event,
				success(res) {
					this.util.toast('已复制');
				}
			});
		},
		navigation() {
			uni.openLocation({
				latitude: Number(this.info.orderAddress.lat),
				longitude: Number(this.info.orderAddress.lng),
				name: this.info.orderAddress.area,
				scale: 18
			});
		},
		call() {
			uni.makePhoneCall({
				phoneNumber: this.info.orderAddress.mobile
			});
		},
		onClose() {
			this.show = false
		},
		showUpload() {
			this.show = true
		},
		delImages(e) {
			let index = e;
			this.images.splice(index, 1);
			this.images = this.images
		},
		chooseImages(e) {
			let index = e;
			this.http.chooseImg(['camera'], true).then((res) => {
				let arr = this.images;
				if (index !== undefined) {
					arr.splice(index, 1, res.data.url);
				} else {
					arr.push(res.data.url);
				}
				this.images = arr
			});
		},
		getInfo() {
			this.http.get('order/orderInfo', {
				id: this.order_id
			}).then((res) => {
				this.info = res.data
				if (res.data.is_settle > 0) {
					this.getSettle();
				}
			});
		},
		getSettle() {
			this.http.get('order/priceInfo', {
				id: this.order_id
			}).then((res) => {
				this.settle = res.data
			});
		},
		accept() {
			this.http.get(
				'order/skillaccept',
				{
					id: this.order_id
				},
				true,
				false
			)
				.then((res) => {
					this.util.toast('抢单成功');
					this.getInfo();
				})
				.catch((e) => {
					let data = e.data;
					if (data.code === 2) {
						this.util.toast(data.msg);
					} else if (data.code === 0) {
						this.util.toast(data.data);
					}
				});
		},
		go() {
			this.http.get('order/skillgo', {
				id: this.order_id
			}).then((res) => {
				this.getInfo();
			});
		},
		arrive() {
			if (this.images.length === 0) return util.toast('请上传图片');
			this.http.get('order/skillreach', {
				id: this.order_id,
				reach_images: this.images.join(',')
			}).then((res) => {
				this.images = [],
				this.show = false
				this.getInfo();
			});
		},
		finish() {
			if (this.images.length === 0) return util.toast('请上传图片');
			this.http.get('order/skillfinish', {
				id: this.order_id,
				finish_images: this.images.join(',')
			}).then((res) => {
				this.images = [],
				this.show = false
				this.getInfo();
			});
		},
		start() {
			this.http.get('order/skillstart', {
				id: this.order_id
			}).then((res) => {
				this.getInfo();
			});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}

.orderDetail {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow-x: auto;
}

.head {
	min-height: 190rpx;
	background: linear-gradient(180deg, #1784ff 0%, #54caff 100%);
}

.state-text {
	font-size: 36rpx;
	font-weight: 800;
	color: #ffffff;
	padding: 52rpx 0 0 32rpx;
}

.explain-text {
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	padding: 10rpx 0 0 32rpx;
}

.state-img {
	width: 86rpx;
	height: 86rpx;
	background: linear-gradient(180deg, #54caff 0%, #0772ff 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.cur-state {
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
}

.line-box {
	width: 65rpx;
}

.line {
	width: 35rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid #ffffff;
	margin-bottom: 30rpx;
}

.floor-2 {
	position: relative;
	top: -50rpx;
	height: 80rpx;
	background-color: #edf1f4;
	border-radius: 50rpx;
}

.make-info {
	width: 686rpx;
	/* height: 470rpx; */
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.order-info-box {
	position: relative;
	top: -80rpx;
}

.make-time {
	display: inline-block;
	padding: 6rpx 16rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #6b738b;
	background-color: #f5f7fb;
}

.chunk {
	height: 1rpx;
}

.time-date {
	font-size: 48rpx;
	font-weight: bold;
	color: #1c274c;
}

.time-hour {
	font-size: 48rpx;
	font-weight: bold;
	display: inline-block;
}

.site {
	font-size: 30rpx;
	font-weight: 800;
	color: #1a1a1a;
	padding-top: 16rpx;
}

.user-info {
	font-size: 26rpx;
	font-weight: 500;
	color: #6b738b;
}

.wire {
	width: 686rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid rgba(164, 169, 183, 0.2);
}

.bz-title {
	color: #a4a9b7;
}

.user-remark {
	color: #1c274c;
	border-top: 1rpx solid rgba(164, 169, 183, 0.2);
}

.phone-img {
	width: 30rpx;
	height: 30rpx;
	margin-right: 32rpx;
}

/* 订单信息 */
.orders-box {
	width: 686rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.order-each-img {
	width: 120rpx;
	height: 120rpx;
	background: #d9d9d9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.order-each-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
	white-space: normal;
}

.types {
	width: 84rpx;
	height: 27rpx;
	border-radius: 4rpx;
	background-color: #1677ff;
	color: #fff;
}

.unit-money {
	color: #ff9600;
	font-size: 22rpx;
}

.order-price {
	color: #ff9600;
	font-size: 30rpx;
}

.order-number {
	margin-top: 42rpx;
	color: #a4a9b7;
	font-size: 22rpx;
}

.quantity {
	color: #a4a9b7;
	font-size: 22rpx;
	display: inline-block;
	float: right;
	position: relative;
	top: 10rpx;
}

.discount {
	height: 32rpx;
	background: #2c2b31;
	color: #f6e0b9;
	border-radius: 5rpx;
}

.ticket-img {
	width: 30rpx;
	height: 26rpx;
}

.font {
	font-size: 26rpx;
	font-weight: 500;
	color: #1c274c;
}

.ticket-price {
	color: #ff9600;
	font-size: 26rpx;
}

.total-t {
	text-align: right;
	font-size: 22rpx;
	color: #a4a9b7;
}

.total-price {
	font-size: 32rpx;
	color: #1c274c;
}

.order-odd {
	width: 622rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.copk {
	padding: 3rpx 8rpx;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
	opacity: 1;
	border: 1rpx solid #62cb81;
	font-size: 20rpx;
	font-weight: 500;
	color: #62cb81;
}

.order-color {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}

.odd-text {
	color: #a4a9b7;
	font-size: 24rpx;
}

.cotto {
	height: 160rpx;
}

.order-btn-box {
	width: 750rpx;
	background: #ffffff;
	opacity: 1;
	flex-shrink: 0;
	box-sizing: border-box;
}

.image-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.upload {
	width: 212rpx;
	height: 212rpx;
	border-radius: 20rpx;
}

.images-box {
	position: relative;
	margin: 0 24rpx 24rpx 0;
}
.images-box:nth-of-type(3n) {
	margin-right: 0;
}
.del {
	position: absolute;
	width: 26rpx;
	height: 26rpx;
	right: 0;
	top: -13rpx;
	z-index: 10;
}

.settle-box {
	width: 686rpx;
	height: 936rpx;
	position: relative;
	box-sizing: border-box;
	padding: 70rpx 64rpx;
}
.settle-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 98%;
}
.settle-title {
	background: linear-gradient(to right, #e93423, #ee7f31);
	width: 188rpx;
	height: 68rpx;
	margin: 0 auto;
	color: #fff;
}
.settle {
	position: relative;
	z-index: 10;
}

.num-box {
	flex-wrap: wrap;
}

.num {
	height: 64rpx;
	width: 270rpx;
	margin: 0 16rpx 16rpx 0;
	background: #f5f7f9;
	box-sizing: border-box;
	padding: 0 16rpx;
}
.num:nth-of-type(2n) {
	margin-right: 0;
}

.refund {
	color: #ff9600;
}
</style>
